import { Options as Component } from 'vue-property-decorator';
import { Vue } from 'vue-class-component';
import { Card } from 'vant';

@Component({
  name: 'Home',
  render() {
    return (
      <div class="pb-16">
        <div class="sticky top-0 z-10 bg-white shadow">
          <div class="p-4">
            <div class="bg-gray-100 rounded-full px-4 py-2">
              <i class="icon-search mr-2"></i>
              搜索商品
            </div>
          </div>
        </div>
        <div class="grid grid-cols-2 gap-4 p-4">
          {this.products.map(product => (
            <Card
              key={product.id}
              onClick={() => this.goToDetail(product.id)}
              class="cursor-pointer"
            >
              <img src={product.image} class="w-full h-40 object-cover" />
              <div class="p-2">
                <div class="text-sm truncate">{product.title}</div>
                <div class="text-red-500 mt-1">￥{product.price}</div>
              </div>
            </Card>
          ))}
        </div>
      </div>
    );
  }
})
export default class Home extends Vue {
  private products = [
    {
      id: 1,
      title: '商品1',
      price: '99.00',
      image: 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg'
    },
    {
      id: 2,
      title: '商品2',
      price: '199.00',
      image: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'
    }
    // 更多商品...
  ];

  private goToDetail(id: number) {
    this.$router.push(`/product/${id}`);
  }
}